<style>
    .red{
        color: red;
    }
    .switch{
        width: 28px;
        height: 14px;
    }
    .switch small{
        width: 14px;
        height: 14px;
    }
    .switch.checked small{
        left: 13px;
    }
</style>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h1>环境初始化向导 {{info.index}}</h1>
                    <div style="font-size: 20px;">
                        <span>步骤</span>
                        <span style="padding-left: 35px;" ng-class="{true:'red',false:''}[info.index == '1']">1</span>
                        <span style="padding-left: 35px;" ng-class="{true:'red',false:''}[info.index == '2']">2</span>
                        <span style="padding-left: 35px;" ng-class="{true:'red',false:''}[info.index == '3']">3</span>
                        <span style="padding-left: 35px;" ng-class="{true:'red',false:''}[info.index == '4']">4</span>
                    </div>
                </div>
                <div class="box-body" style="margin-top:1px;">
                    <table width="60%" style="font-size: 15px;">
                        <tr>
                            <td colspan="4">首先,请选择该虚拟机要模拟的集群环境, 可以多选(至少选一个):</td>
                        </tr>
                        <tr>
                            <td>uCloud&nbsp;&nbsp;IP:</td>
                            <td>{{info.vmInfo.ip}}</td>
                            <td>状态:</td>
                            <td>{{info.vmStatus}}</td>
                        </tr>
                        <tr>
                            <td>CPU:</td>
                            <td>{{info.vcloud.cpu_cores}}&nbsp;&nbsp;&nbsp;&nbsp;推荐CPU:4C</td>
                            <td>内存:</td>
                            <td>{{info.vcloud.memory}}&nbsp;&nbsp;&nbsp;&nbsp;推荐内存:48G</td>
                        </tr>
                        <tr>
                            <td>硬盘空间:</td>
                            <td>{{info.vcloud.disk}}&nbsp;&nbsp;&nbsp;&nbsp;推荐硬盘空间:200G</td>
                            <td>剩余硬盘空间:</td>
                            <td>{{info.vcloud.disk_free}}</td>
                        </tr>
                    </table>
                    <br>
                    <div ng-show="info.index == '1'" style="width: 60%;">
                        <table class="table table-bordered" >
                            <thead>
                            <tr>
                                <th width="5%">区域</th>
                                <th width="10%">说明</th>
                                <th width="5%">支持(是/否)</th>
                                <th width="5%">激活(开/关)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="item" data-ng-repeat="zone in info.zones track by $index">
                                <td>{{zone.zone_title}}</td>
                                <td>{{zone.instructions}}</td>
                                <td>
                                    <span ng-if="zone.isSupport">是</span>
                                    <span ng-if="!zone.isSupport">否</span>
                                </td>
                                <td>
                                    <switch data-ng-model="zone.available"></switch>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div ng-show="info.index == '2'" style="font-size: 15px;">
                        接下来,请问是否需要初始化数据库?
                        <br>
                        <label class="radio-inline">
                            <input name="initDatabase" type="radio" ng-value="true" data-ng-model="info.initDatabase"/>
                            是,请初始化数据库
                        </label>
                        <br>
                        <label class="radio-inline">
                            <input name="initDatabase" type="radio" ng-value="false" data-ng-model="info.initDatabase"/>
                            否,我会自己 手动初始化数据库
                        </label>
                        <div>
                            提示:最新版数据库和最新版代码更加稳定.
                                另外,新添加的环境的库会被自动初始化.
                        </div>
                    </div>
                    <div ng-show="info.index == '3'" style="font-size: 15px;">
                        我们准备了2套测试数据, 请问您要导入那一份?
                        <br>
                        <label class="radio-inline">
                            <input name="dataFrom" type="radio" value="demo" data-ng-model="info.dataFrom"/>
                            我需要导入demo的数据(量小, 导入在1小时内完成,满足大部分测试目标)
                        </label>
                        <br>
                        <label class="radio-inline">
                            <input name="dataFrom" type="radio" value="production" data-ng-model="info.dataFrom"/>
                            我需要production版的(量大, 导需要数小时, 对硬盘容量有要求)
                        </label>
                        <div>
                            提示:您已经选择了更新数据库,强烈建议您选择自动安装代码.
                                最新版数据库和最新版代码更加稳定.
                        </div>
                    </div>
                    <div ng-show="info.index == '4'" style="font-size: 15px;">
                        信息收集完毕,准备启动:
                        <br>
                        <i class="glyphicon glyphicon-ok i_class"/>
                        <span data-ng-repeat="zone in info.zones track by $index" ng-if="zone.available">
                            {{zone.zone_title}},
                        </span>
                        <div ng-if="info.initDatabase">
                            <i class="glyphicon glyphicon-ok i_class"/>自动初始化数据库
                            <br>
                            <i class="glyphicon glyphicon-ok i_class"/>使用{{info.dataFrom}}版数据
                        </div>
                        <div>
                            提示:您要初始化<span ng-if="info.initDatabase">{{info.oracleCount}}个oracle数据库,
                            {{info.mysqlCount}}个mysql数据库, </span>{{info.appCount}}个应用.
                            大概需要{{info.totalTime}}小时左右.
                        </div>
                    </div>
                    <br>
                    <div style="width: 60%;">
                        <button ng-disabled="info.index == '1'" style="margin-left: 10%;" class="btn btn-default" data-ng-click="previousBtn();">Previous</button>
                        <button ng-show="info.index != '4'" style="float: right;margin-right: 10%;" class="btn btn-default" data-ng-click="nextBtn();">Next</button>
                        <button ng-show="info.index == '4'" style="float: right;margin-right: 10%;" class="btn btn-default" data-ng-click="doInit();">开始初始化</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>